/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'Bar';
@import 'mixins';
@import '../mixins';
@import '../../Terminal/mixins';

$status-size: 0.625em;

@include PlainTerminal {
  @include SequenceDiagram {
    min-width: 30rem;
  }
}

@include WidthConstrained {
  @include SequenceDiagramCard {
    /** otherwise, the bars seem to overflow a bit */
    overflow: hidden;
  }

  @include SequenceDiagram {
    @include StatusBadge {
      width: $status-size;
      height: $status-size;
    }
  }
}

body[kui-theme-style] {
  @include SequenceDiagram {
    width: 100%;
    @include SequenceDiagramGapCell {
      &.kui--table-cell-is-name {
        font-weight: bold;
      }
    }

    .kui--sequence-diagram-bar-cell {
      vertical-align: middle;
      padding: 0;
    }
    tr {
      height: var(--bar-height);
    }

    tr.kui--sequence-diagram-data-row {
      &,
      &:hover {
        border: var(--row-border);
        border-left: none;
        border-right: none;

        /* td.kui--sequence-diagram-bar-cell {
          border-right: 1px solid var(--color-table-border1);
        } */
      }
    }

    & {
      td {
        height: unset;
        line-height: var(--bar-height);
        padding: 0 0.375rem;
      }
    }

    td.kui--secondary-text {
      font-size: var(--font-size--secondary);
    }
    td.kui--tertiary-text {
      font-size: var(--font-size--tertiary);
    }

    .cell-inner {
      &.gray-background {
        color: $color-bg--bar-gray;
      }
      &.red-background {
        color: var(--color-red);
      }
      &.green-background {
        color: $color-bg--bar-green;
      }
      &.yellow-background {
        color: $color-bg--bar-yellow;
      }
      &.blue-background {
        color: $color-bg--bar-blue;
      }
    }

    tr:not(.kui--interval-start),
    tr:not(.kui--interval-start):hover {
      td {
        border: 1px solid transparent;
      }
    }
    tr.kui--sequence-diagram-data-row:hover {
      &,
      td {
        background-color: transparent;
        .kui--bar {
          filter: $grid-cell-hover-filter;
        }
      }
    }
    tbody tr.kui--interval-blank {
      height: 0.875rem;

      &,
      &:hover {
        &,
        td {
          background-color: var(--color-repl-background);
        }
      }
    }
    tr.kui--interval-start,
    tr.kui--interval-start-jobName {
      height: 2rem;

      &,
      &:hover {
        &,
        td {
          background-color: var(--color-base03);
        }
      }

      @include SequenceDiagramGapCell {
        border: none;
        font-size: 0.875rem;
        text-align: left;
        padding: 0.375rem;
      }
    }
    .kui--interval-start-jobName {
      @include SequenceDiagramGapCell {
        padding-top: 0;
      }
    }
    .kui--interval-start,
    .kui--interval-start:hover {
      td {
        border-bottom: none;
      }
    }
    tr {
      &,
      &:hover {
        td.kui--tertiary-text {
          color: var(--color-text-02);
        }
      }
    }

    @include StatusBadge {
      width: $status-size;
      height: $status-size;
    }

    $loading1: var(--color-base03);
    $loading2: var(--color-base01);
    .kui--sequence-diagram-in-progress {
      background: linear-gradient(100deg, $loading1, $loading2 50%, $loading1 55%);
      background-size: 400%;
      /*animation: kui--sequence-diagram-in-progress 1.2s ease-in-out infinite;*/
    }
  }

  @keyframes kui--sequence-diagram-in-progress {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
}

@include LightweightTableContainer {
  @include SequenceDiagram {
    margin: 1rem 0;
  }
}
